﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--DXMETADATA start type="MetaCharset" --><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><!--DXMETADATA end-->
    <meta http-equiv="X-UA-Compatible" value="IE=9" />

    <!--DXMETADATA start type="Literal" condition="helpversion:value=3" value="<meta name=""Microsoft.Help.SelfBranded"" content=""true"" />" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<title>%%ProjectTitle%% - %%ItemTitle%%</title>" --><title>SpreadJS Documentation - Add Hover Animation and Style</title><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<meta name=""Title"" content=""%%ProjectTitle%% - %%ItemTitleNoQuotes%%""/>" --><meta name="Title" content="SpreadJS Documentation - Add Hover Animation and Style"/><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="jquery" filetype="script" firstlinkattributes="id=""mshs_support_script"""--><script src="template/packages/jquery/script/default/jquery-1.11.3.min.js" type="text/javascript" id="mshs_support_script"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="script"--><script src="template/packages/jquery-ui/script/default/jquery-ui-1.11.4.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/jquery-ui/css/default/jquery-ui-1.11.4.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="TemplateSettingsJson" format="<script type=""text/javascript"">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:%%TemplateSettingsJson%%});</script>" --><script type="text/javascript">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:{"dynamictoc":{"initialNodeId":"n390","initialNodeContainer":"c0","isResizable":true},"inthistopic":{"isEnabled":true},"currentLocale":"-","isFrameless":true,"navigationKind":"inpage","versions":{"locale":{"currentId":"-"}}}});</script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="light" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/light/css/dynamic-toc.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="Synopsis" StripHtmlTags="True" MaxLength="250" format="<meta name=""Description"" content=""%%Synopsis%%"" />"--><meta name="Description" content="Usually, when a lot of data is plotted in a chart, data labels clutter the entire chart and make the view meaningless. SpreadJS provides support for adding hover animations and hover styles to enhance the user experience while interacting with charts" /><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/plugins-topics/css/default/jquery-plugins.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="css" firstlinkattributes=" data-mshv2-stylesheet=""/template/packages/core-topics/topics.mshv2.css"" data-mshv1-stylesheet=""/template/packages/core-topics/topics.mshv1.css"" data-responsive-mobile=""template/packages/core-topics/topics.mobile.css"" data-responsive-tablet=""template/packages/core-topics/topics.tablet.css"""--><link rel="stylesheet" type="text/css" href="template/packages/core-topics/css/topics.css"  data-mshv2-stylesheet="/template/packages/core-topics/topics.mshv2.css" data-mshv1-stylesheet="/template/packages/core-topics/topics.mshv1.css" data-responsive-mobile="template/packages/core-topics/topics.mobile.css" data-responsive-tablet="template/packages/core-topics/topics.tablet.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="script"--><script src="template/packages/plugins-topics/script/default/jquery-plugins.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="script"--><script src="template/packages/core-topics/script/topics.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="TopicId" format="<meta name=""Microsoft.Help.Id"" content=""%%TopicId%%""/>" --><meta name="Microsoft.Help.Id" content="75d69f16-79d2-43dc-91f7-a1b4386d12c3"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocParentId" format="<meta name=""Microsoft.Help.TocParent"" content=""%%TocParentId%%""/>" --><meta name="Microsoft.Help.TocParent" content="bdba97c4-037f-4cd7-ae56-830374286ef0"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocOrdinal" format="<meta name=""Microsoft.Help.TocOrder"" content=""%%TocOrdinal%%""/>" --><meta name="Microsoft.Help.TocOrder" content="6"/><!--DXMETADATA end-->
    <meta name="Microsoft.Help.F1" content=""/>
    <meta name="Microsoft.Help.ContentType" content="Concepts" />
    <!--DXMETADATA start type="MshvKeywords" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="MshvMetaTags" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.Locale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.TopicLocale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Stylesheets" --><link rel="stylesheet" type="text/css" href="stylesheets/hs-simpletab.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="StylePropertyValues" format="<style>%%StylePropertyValues%%</style>" --><style>.i-is-new .i-page-title-text::after, ul#i-dt-root li.i-is-new>a::after { content: "New" }
</style><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scripts" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="DesignTime"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_PROPERTIES" --><!--DXMETADATA end -->
    <!--DXMETADATA start type="CustomHeadContent" --><link rel="stylesheet" type="text/css" href="template/packages/core-web/css/SP.css">
<script type="text/javascript">
var currentHeader = function() {
    return "spjs";
}
</script>
<script src="template/packages/core-web/script/topNavigation.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-WT462SJ"></script>
<script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime()
                , event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0]
                , j = d.createElement(s)
                , dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ');
    </script>
<!--DXMETADATA end-->
</head>

<body>
    <div id="i-before-header-content" class="i-before-header-content">
        
    </div>

    <div id="i-header-container">
        <div id="i-header-content" class="i-header-content i-content-width-container">
            <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end-->
            <div class="i-project-title"><!--DXMETADATA start type="ProjectTitle" -->SpreadJS Documentation<!--DXMETADATA end--></div>
            <div class="i-search-container">
                <!--DXMETADATA start type="outputfileextension" format="<form action=""websearch%%outputfileextension%%"">" --><form action="websearch.html"><!--DXMETADATA end-->
                <input id="i-search" name="query"/>
                <input type="submit" id="i-search-button" value=""/>
                <!--DXMETADATA start type="Literal" value="</form>" --></form><!--DXMETADATA end-->
            </div>
            <!--DXMETADATA start type="outputfileextension" format="<a id=""i-index-button"" href=""webindex%%outputfileextension%%""></a>" --><a id="i-index-button" href="webindex.html"></a><!--DXMETADATA end-->
        </div>
    </div>
    
    <div class="i-content-width-container"><div class="i-busy-overlay"></div></div>

    <div id="i-breadcrumbs-outer-container" class="i-content-width-container"><!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="i-breadcrumbs-container">
<a href="overview.html">SpreadJS Documentation</a>
 / <a href="devguide.html">Developer's Guide</a>
 / <a href="features.html">Features</a>
 / <a href="ManagingDataVisualizationAndObjects.html">Manage Data Visualization and Objects</a>
 / <a href="Charts.html">Charts</a>
 / Add Hover Animation and Style</div><!--DXMETADATA end --></div>

    

    <div id="i-actions-outer-container" class="i-content-width-container">
        <div id="i-actions-container">
            <div id="i-actions-content" class="i-fixed-to-top">
                <!-- Spacing --> <span class="i-toggle-all-sections i-function-link">
                <label class="i-collapse-all"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label>
                <label class="i-expand-all" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label>
            </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end -->
                <div class="i-in-this-topic-container">
                    <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
                </div>
            </div>
        </div>
    </div>

    <div id="i-toc-outer-container" class="i-content-width-container">
        <div id="i-toc-container">
            <div id="i-toc-content" class="i-fixed-to-top">
                <div class="i-toc-content-scroll-container">
                    <div id="i-dynamic-toc-container"><ul id="i-dt-root"></ul></div>
                </div>
            </div>
        </div>
    </div>

    <div id="i-body-content-container" class="i-content-width-container">
        <div id="i-body-content" class="i-body-content">
            <div class="i-page-title"><div class="i-page-title-text"><!--DXMETADATA start type="ItemTitle" -->Add Hover Animation and Style<!--DXMETADATA end--></div></div>
            <div class="i-in-this-topic-container">
                <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
            </div>
            <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>Usually, when a lot of data is plotted in a chart, data labels clutter the entire chart and make the view meaningless. SpreadJS provides support for adding hover animations and hover styles to enhance the user experience while interacting with charts.</p>

<h3 id="a">Add Hover Animation</h3>

<p>While working with SpreadJS, adding hover animation allows users to interact with the data points in the chart. This feature helps users to explore data and turn a basic chart into a responsive chart. Moreover, it enhances the readability of charts while making the spreadsheet more appealing for users.&nbsp;</p>

<p>Hover animations are useful especially when:</p>

<ul>
    <li>Users are interested in knowing the exact values of the data points.</li>

    <li>Users want to display additional information using mouse-over to derive valuable outcomes while analyzing charts.</li>
</ul>

<p>The following screenshot depicts a chart with hover animations. Users can use the mouse hover animation effect in the worksheet by simply moving the mouse pointer over the chart.</p><br />

<p><img border="0" alt="" src="images/spreadjsv13images/hover-animation.gif" />&nbsp;</p>

<p>The&nbsp;<a href="SpreadJS~GC.Spread.Sheets.Charts.Chart~useAnimation.html">useAnimation()</a> method can be used to add hover animation to charts. All chart types support hover animation except the StockHLC chart. After applying hover animation effect, the data points in the chart enlarge and additional details about the plotted data points are displayed.</p>

<h3 id="b">Apply Hover Style</h3>

<p>While working with SpreadJS, users can apply hover styles to charts&nbsp;by&nbsp;using the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.Charts.Chart~hoverStyle.html">hoverStyle()</a> method. This&nbsp;feature allows users to highlight different data points in the chart. Moreover, it helps analysts to customize the appearance of the data that dynamically gets displayed when a user hovers over the data points in the chart.</p>

<p>All chart types support hover styles. Users can modify the color, transparency, line width, line color, line transparency, line type, symbol color, symbol transparency, symbol line width, symbol line color, symbol line transparency and symbol line type while applying hover styles to the charts.</p>

<div class="i-box i-box-note">
    <p><strong>Note:</strong> The priority of hover style is higher than the style set for the data points.</p>
</div>

<p>The following screenshot depicts hover styles applied to a chart.</p>

<p><img border="0" alt="" src="images/spreadjsv13images/hover-style.gif" /></p>

<h3 id="c">Using Code</h3>

<p>Refer to the following example code to add hover animations and hover styles to charts while visualizing data in spreadsheets.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">
                    <p>&lt;script type="text/javascript"&gt;<br />
                    var chart_columnClustered, chart_columnStacked, chart_columnStacked100, sheet;<br />
                    window.onload = function () {<br />
                    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));<br />
                    activeSheet = spread.getActiveSheet();<br />
                    activeSheet.suspendPaint();</p>

                    <p>// Prepare data for the&nbsp;chart<br />
                    activeSheet.setValue(0, 1, "Y-2015");<br />
                    activeSheet.setValue(0, 2, "Y-2016");<br />
                    activeSheet.setValue(0, 3, "Y-2017");<br />
                    activeSheet.setValue(0, 4, "Y-2018");<br />
                    activeSheet.setValue(0, 5, "Y-2019");<br />
                    activeSheet.setValue(1, 0, "Gradlco");<br />
                    activeSheet.setValue(2, 0, "Saagiate");<br />
                    activeSheet.setValue(3, 0, "Inferno");<br />
                    activeSheet.setColumnWidth(0, 120);<br />
                    for (var r = 1; r &lt;= 3; r++)</p>

                    <p>{<br />
                    &nbsp;&nbsp;for (var c = 1; c &lt;= 5; c++)</p>

                    <p>&nbsp;&nbsp; {<br />
                    &nbsp; activeSheet.setValue(r, c, parseInt(Math.random() * 5000));<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;}<br />
                    }</p>

                    <p>// Configure Line Marker chart with HoverStyle<br />
                    var lineMarkerChart = activeSheet.charts.add('lineMarkerChart', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 20, 100, 380, 330, "A1:F4", GC.Spread.Sheets.Charts.RowCol.columns);<br />
                    lineMarkerChart.title({ text: "HoverStyle with markers" });<br />
                    var seriesItem = lineMarkerChart.series().get(0);<br />
                    seriesItem.symbol.size = 20;<br />
                    lineMarkerChart.series().set(0, seriesItem);<br />
                    var hoverStyle = lineMarkerChart.hoverStyle();<br /></p>

                    <p>// Set applyHoverStyle to true<br />
                    hoverStyle.applyHoverStyle = true;<br />
                    hoverStyle.color = "orange";<br />
                    hoverStyle.transparency = 0.1;<br />
                    hoverStyle.borderStyle.transparency = 0.1;<br />
                    hoverStyle.borderStyle.color = '#FF0000';<br />
                    hoverStyle.borderStyle.width = 3;<br />
                    hoverStyle.borderStyle.dashStyle = GC.Spread.Sheets.Charts.LineType.lgDash;<br />
                    hoverStyle.symbolStyle.color = "yellow";<br />
                    hoverStyle.symbolStyle.transparency = 0.1;<br />
                    hoverStyle.symbolStyle.borderStyle.transparency = 0.1;<br />
                    hoverStyle.symbolStyle.borderStyle.color = 'rgb(0, 0, 255)';<br />
                    hoverStyle.symbolStyle.borderStyle.width = 9;<br />
                    hoverStyle.symbolStyle.borderStyle.dashStyle = GC.Spread.Sheets.Charts.LineType.lgDash;<br />
                    lineMarkerChart.hoverStyle(hoverStyle);</p>

                    <p>// Configure Pie chart with Hover Animation<br />
                    var pieChart = activeSheet.charts.add('pieChart', GC.Spread.Sheets.Charts.ChartType.pie, 420, 100, 380, 330, 'A1:F4');<br />
                    pieChart.title({ text: "HoverStyle with Animation" });<br />
                    pieChart.useAnimation(true);<br />
                    var hoverStyle1 = pieChart.hoverStyle();<br /></p>

                    <p>// Set applyHoverStyle to true<br />
                    hoverStyle1.applyHoverStyle = true;<br />
                    hoverStyle1.color = "orange";<br />
                    hoverStyle1.transparency = 0.6;<br />
                    hoverStyle1.borderStyle.transparency = 0.1;<br />
                    hoverStyle1.borderStyle.color = '#FF0000';<br />
                    hoverStyle1.borderStyle.width = 9;<br />
                    hoverStyle1.borderStyle.dashStyle = GC.Spread.Sheets.Charts.LineType.lgDash;<br />
                    pieChart.hoverStyle(hoverStyle1);</p>

                    <p>activeSheet.resumePaint();</p>

                    <p>};<br />
                    &lt;/script&gt;</p>
                </td>
            </tr>
        </tbody>
    </table>
</div><!--DXMETADATA end-->
            <a name="seealsobookmark"></a>
            <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end-->
            
            <div id="i-footer-content" class="i-footer-content">
                <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p>&nbsp;</p><p>&nbsp;</p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p>&nbsp;</p><p>&nbsp;</p><hr style="height: 1px" /><p><p>Copyright © 2019 GrapeCity, Inc. All rights reserved.</p>
<p><a href="https://www.grapecity.com/en/forums/winforms-edition" target="_blank">Product Support Forum</a> | <a href="javascript:window.print()">Print this page</a></p>
<ul class="social">
<li><a href="https://www.facebook.com/GrapeCityUS/" target="_blank" class="facebook">&nbsp;</a></li>
<li><a href="https://twitter.com/GrapeCityUS" target="_blank" class="twitter">&nbsp;</a></li>
<li><a href="https://www.linkedin.com/company/grapecity" target="_blank" class="linkedin">&nbsp;</a></li>
</ul>
</p><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><!--DXMETADATA end-->
            </div>
        </div>
    </div>
        
    <script type="text/javascript">
        $(function () {
            var documentInstance = new Innovasys.Content.Document(document.body);
            documentInstance.load();
        });
    </script>
</body>
</html>
